<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="dept">
				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="changeType">
					<el-tab-pane name="1">
						<template #label>
							<span class="custom-tabs-label">
								<el-icon><img src="/@/assets/icons/dian.svg" style="width: 20px; height: 20px" /></el-icon>
								<span>电</span>
							</span>
						</template>
					</el-tab-pane>
					<el-tab-pane name="2">
						<template #label>
							<span class="custom-tabs-label">
								<el-icon><img src="/@/assets/icons/shui.svg" style="width: 20px; height: 20px" /></el-icon>
								<span>水</span>
							</span>
						</template>
					</el-tab-pane>
					<el-tab-pane name="3">
						<template #label>
							<span class="custom-tabs-label">
								<el-icon><img src="/@/assets/icons/qi.svg" style="width: 20px; height: 20px" /></el-icon>
								<span>燃气</span>
							</span>
						</template>
					</el-tab-pane>
				</el-tabs>
				<div class="content">
					<avue-crud
						ref="crud"
						v-model="form"
						:option="option"
						:data="data"
						:page="page"
						@on-load="getList"
						@row-save="rowAdd"
						:before-open="handleOpenBefore"
						@search-change="searchChange"
						@size-change="sizeChange"
						@current-change="currentChange"
						@refresh-change="refreshChange"
						@row-update="rowUpdate"
						@row-del="rowDel"
					>
						<template #timeValue-form>
							<el-date-picker v-model="form.timeValue" type="month" placeholder="请选择月份" style="width: 100%" />
						</template>
						<template #totalValue-form>
							<avue-input-number v-model="form.totalValue"></avue-input-number>
						</template>
					</avue-crud>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { getEnergyinputList, addEnergyinputList, delEnergyinputList, editEnergyinputList } from '/@/api/consumptionmanagement/handsrecords';
import { mapGetters } from 'vuex';
import moment from 'moment/moment';
export default {
	data() {
		return {
			data: [],
			form: {},
			activeName: '1',
			searchForm: {},
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
			},
			option: {
				index: false,
				searchMenuSpan: 12,
				searchLabelWidth: 'auto',
				searchMenuPosition: 'left',
				addBtn: true,
				editBtn: true,
				delBtn: true,
				columnBtn: false,
				menuWidth: 300,
				searchSpan: 4,
				refreshBtn: true,
				gridBtn: false,
				column: [
					{
						label: '表计名称',
						type: 'input',
						prop: 'unitName',
						search: true,
						rules: [
							{
								required: true,
								trigger: 'blur',
								message: '表计名称必填',
							},
						],
					},
					{
						label: '设备编码',
						type: 'input',
						prop: 'unitNo',
					},
					{
						label: '抄表时间',
						type: 'date',
						prop: 'timeValue',
					},
					{
						label: '总能耗',
						prop: 'totalValue',
						type: 'input',
					},
				],
			},
		};
	},
	computed: {
		...mapGetters(['permissions']),
		permissionList() {
			return {
				addBtn: this.validData(this.permissions.twinops_dimArea_add, false),
				editBtn: this.validData(this.permissions.twinops_dimArea_edit, false),
				delBtn: this.validData(this.permissions.twinops_dimArea_del, false),
			};
		},
	},
	mounted() {},
	methods: {
		refreshChange() {
			this.getList(this.page);
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		currentChange(current) {
			this.page.currentPage = current;
		},
		changeType(tab, event) {
			this.activeName = tab.props.name;
			this.getList(this.page);
		},
		handleOpenBefore(done, type) {
			this.devModel = '';
			done();
		},
		searchChange(form, done) {
			this.searchForm = form;
			this.page.currentPage = 1;
			this.getList(this.page, form);
			done();
		},
		//初始化表格数据
		getList(page, params) {
			this.tableLoading = true;
			getEnergyinputList(
				Object.assign(
					{
						current: page.currentPage,
						size: page.pageSize,
						energyType: this.activeName,
					},
					params,
					this.searchForm
				)
			).then((res) => {
				this.data = res.data.records ? res.data.records : [];
				this.page.total = res.data.total;
				this.tableLoading = false;
			});
		},
		rowAdd: function (row, done, loading) {
			const params = {
				energyType: this.activeName,
				totalValue: row.totalValue,
				timeValue: moment(row.timeValue).format('YYYYMM'),
				unitName: row.unitName,
				unitNo: row.unitNo,
			};
			addEnergyinputList(params)
				.then((data) => {
					this.$message.success('添加成功');
					this.getList(this.page);
					done();
				})
				.catch(() => {
					loading();
				});
		},
		rowUpdate: function (row, done, loading) {
			const params = {
				id: row.id,
				energyType: this.activeName,
				totalValue: row.totalValue,
				timeValue: moment(row.timeValue).format('YYYYMM'),
				unitName: row.unitName,
				unitNo: row.unitNo,
			};
			editEnergyinputList(params)
				.then((data) => {
					this.$message.success('修改成功');
					this.getList(this.page);
					done();
				})
				.catch((e) => {
					loading();
				});
		},
		rowDel: function (row, index) {
			this.$confirm('是否确认删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delEnergyinputList([row.id]);
				})
				.then((data) => {
					this.$message.success('删除成功');
					this.getList(this.page);
				})
				.catch((cancelorerror) => {});
		},
	},
};
</script>
<style scoped lang="scss">
.dept {
	padding: 10px;
	.demo-tabs > .el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}
	.demo-tabs .custom-tabs-label .el-icon {
		vertical-align: middle;
	}
	.demo-tabs .custom-tabs-label span {
		vertical-align: middle;
		margin-left: 4px;
	}
	.content {
		margin-top: 10px;
		height: 70vh;
		overflow-y: scroll;
	}
}
</style>
